<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Demo Javascript Injection</title>
    <link rel="stylesheet" href="DemoJavascriptInjection.css">
    <link rel="stylesheet" type="text/css" href="css/prettify.css">
    <script type="text/javascript" src="js/prettify.js"></script>
  </head>
  <body>
  	
  	<div align="center">
  		<script type="text/javascript"><!--
			google_ad_client = "ca-pub-0032065764310410";
			/* Dart Demos */
			google_ad_slot = "0422443712";
			google_ad_width = 728;
			google_ad_height = 90;
			//-->
		</script>
		<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
  	</div>
  
	<h1>Demo Dart Javascript Injection</h1>	
	<b>See more on the</b> <a href="http://c.dart-examples.com/api/dart-html/interface/element/scriptelement" _target="blank">ScriptElement</a>
	<br/>
	<br/>
	<br/>
	
	<div>
	    <div id="googlePlus"></div> 
	    <div id="twitter"></div>
	    <div id="facebook"></div>
    </div>
    
    <br/>
    <br/>
    <div>Injecting Javascript into your Dart application</div>
    <pre class="prettyprint"><span class="com">#import('dart:html');</span><span class="pln"><br><br></span><span class="kwd">void</span><span class="pln"> main</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; drawGooglePlusButton</span><span class="pun">();</span><span class="pln"><br>&nbsp; drawTwitterButton</span><span class="pun">();</span><span class="pln"><br>&nbsp; drawFacebookButton</span><span class="pun">();</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br><br></span><span class="kwd">void</span><span class="pln"> drawGooglePlusButton</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="typ">String</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="str">'&lt;div class="g-plusone" data-annotation="inline" data-width="300"&gt;&lt;/div&gt;'</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#googlePlus"</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> html</span><span class="pun">;</span><span class="pln"><br>&nbsp; <br>&nbsp; </span><span class="typ">ScriptElement</span><span class="pln"> script </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ScriptElement</span><span class="pun">();</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">async </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">"https://apis.google.com/js/plusone.js"</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span><span class="pln"> </span><span class="str">"text/javascript"</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#googlePlus"</span><span class="pun">).</span><span class="pln">nodes</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">script</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br><br></span><span class="kwd">void</span><span class="pln"> drawTwitterButton</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="typ">String</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="str">'&lt;a href="https://twitter.com/branflake2267" class="twitter-follow-button" data-show-count="false" data-size="large"&gt;Follow @branflake2267&lt;/a&gt;'</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#twitter"</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> html</span><span class="pun">;</span><span class="pln"><br>&nbsp; <br>&nbsp; </span><span class="typ">ScriptElement</span><span class="pln"> script </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ScriptElement</span><span class="pun">();</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">async </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">"http://platform.twitter.com/widgets.js"</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span><span class="pln"> </span><span class="str">"text/javascript"</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#twitter"</span><span class="pun">).</span><span class="pln">nodes</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">script</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br><br></span><span class="kwd">void</span><span class="pln"> drawFacebookButton</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="typ">String</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="str">'&lt;div id="fb-root"&gt;&lt;/div&gt;&lt;div class="fb-like" data-href="http://c.dart-examples.com" data-send="true" data-width="450" data-show-faces="true"&gt;&lt;/div&gt;'</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#facebook"</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> html</span><span class="pun">;</span><span class="pln"><br>&nbsp; <br>&nbsp; </span><span class="typ">ScriptElement</span><span class="pln"> script </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ScriptElement</span><span class="pun">();</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">async </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">"https://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=360471930632325"</span><span class="pun">;</span><span class="pln"><br>&nbsp; script</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span><span class="pln"> </span><span class="str">"text/javascript"</span><span class="pun">;</span><span class="pln"><br>&nbsp; query</span><span class="pun">(</span><span class="str">"#facebook"</span><span class="pun">).</span><span class="pln">nodes</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">script</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br><br></span></pre>
	    
    
    
    <script type="application/dart" src="DemoJavascriptInjection.dart"></script>
    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
    
    <script type="text/javascript">
  	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-32211375-4']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	</script>
  </body>
</html>
